<!--
  *  表格列设置
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-08-26 23:45:51
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->

<template>
  <span>
    <a-tooltip title="全屏" v-if="!fullScreenFlag">
      <a-button type="text" @click="onFullScreen" size="small">
        <template #icon><fullscreen-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="取消全屏" v-if="fullScreenFlag">
      <a-button type="text" @click="onFullScreen" size="small">
        <template #icon><fullscreen-exit-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="刷新">
      <a-button type="text" @click="props.refresh" size="small">
        <template #icon><redo-outlined /></template>
      </a-button>
    </a-tooltip>
    <!-- <a-tooltip title="列设置">
      <a-button type="text" @click="showModal" size="small">
        <template #icon><setting-outlined /></template>
      </a-button>
    </a-tooltip> -->
    <SmartTableColumnModal ref="smartTableColumnModal" @change="updateColumn" />
  </span>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { tableColumnApi } from '@/api/support/table-column-api'
import SmartTableColumnModal from './smart-table-column-modal.vue'
import { message } from 'ant-design-vue'
import { mergeColumn } from './smart-table-column-merge'
import { errorSentry } from '@/lib/error-sentry'
import { useAppConfigStore } from '@/store/modules/app-store'

const props = defineProps({
  // 表格列数组
  modelValue: {
    type: Array,
    default: []
  },
  // 刷新表格函数
  refresh: {
    type: Function,
    required: true
  },
  // 表格id
  tableId: {
    type: Number,
    require: true
  }
})

const emit = defineEmits(['update:modelValue'])

// 原始表格列数据（复制一份最原始的columns集合，以供后续各个地方使用）
let originalColumn = _.cloneDeep(props.modelValue)

// onMounted(buildUserTableColumns);

//构建用户的数据列
async function buildUserTableColumns() {
  if (!props.tableId) {
    return
  }

  let userTableColumnArray = []
  try {
    let res = await tableColumnApi.getColumns(props.tableId)
    if (res.data) {
      try {
        userTableColumnArray = JSON.parse(res.data)
      } catch (e1) {
        errorSentry.captureError(e1)
      }
    }
  } catch (e) {
    errorSentry.captureError(e)
  }
  updateColumn(userTableColumnArray)
}

// ----------------- 全屏 -------------------
const fullScreenFlag = ref(false)

function onFullScreen() {
  if (fullScreenFlag.value) {
    // 退出全屏
    handleExitFullScreen()
    exitElementFullscreen(document.body)
  } else {
    fullScreenFlag.value = true
    useAppConfigStore().startFullScreen()
    launchElementFullScreen(document.body)
  }
}

// 处理退出全屏
function handleExitFullScreen() {
  fullScreenFlag.value = false
  useAppConfigStore().exitFullScreen()
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  document.removeEventListener('mozfullscreenchange', handleFullscreenChange) // Firefox
  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange) // Chrome, Safari and Opera
  document.removeEventListener('MSFullscreenChange', handleFullscreenChange) // Internet Explorer and Edge
}

//判断各种浏览器 -全屏
function launchElementFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else {
    message.error('当前浏览器不支持部分全屏！')
  }
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  document.addEventListener('mozfullscreenchange', handleFullscreenChange) // Firefox
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange) // Chrome, Safari and Opera
  document.addEventListener('MSFullscreenChange', handleFullscreenChange) // Internet Explorer and Edge
}

function handleFullscreenChange() {
  if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    console.log('进入全屏模式')
  } else {
    console.log('退出全屏模式')
    handleExitFullScreen()
  }
}

//判断各种浏览器 -退出全屏
function exitElementFullscreen(element) {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

// ----------------- 弹窗 修改表格列 -------------------

const smartTableColumnModal = ref()
function showModal() {
  smartTableColumnModal.value.show(originalColumn, props.tableId)
}

// 将弹窗修改的列数据，赋值给原表格 列数组
function updateColumn(changeColumnArray) {
  //合并列
  const newColumns = mergeColumn(_.cloneDeep(originalColumn), changeColumnArray)
  emit(
    'update:modelValue',
    newColumns.filter((e) => e.showFlag)
  )
}

// ========= 定义 watch 监听 ===============
watch(
  () => props.tableId,
  (e) => {
    if (e) {
      originalColumn = _.cloneDeep(props.modelValue)
      // buildUserTableColumns();
    }
  },
  { immediate: true }
)
</script>
